<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>常用的html标签</title>
  </head>
  <body>
    <!-- 获取颜色标签 -->
    <input type="color" />
    <br />
    <!-- 拖动条 -->
    <input type="range" />
    <br />
    <!-- 搜索框  和普通的输入框的区别就在于多了一个清空输入内容的小按钮-->
    <input type="search" name="" id="" />
    <br />
    <!-- 具体的时间选择标签 -->
    <input type="time" name="" id="" /><br />
    <input type="date" name="" id="" /><br />
    <input type="datetime-local" name="" id="" /><br />
    <input type="month" /><br />
    <!-- 给输入框设置默认选项 -->
    <input type="text" list="email" />
    <datalist id="email">
      <!-- 这些默认值可以是后端传递的一组数据 -->
      <option value="@qq.com"></option>
      <option value="@163.com"></option>
      <option value="@gmail.com"></option>
    </datalist>
    <br />
    <!-- 
      进度条 
        如果只写一个progress标签 那么这个进度条默认会自己一直在滚动
    -->
    <progress value="30" max="100"></progress>
    <progress></progress>
    <!-- 
      字体增强标签 
        这些标签默认都是在span标签的基础上加的一些样式  所以他们都是属于行辈元素
    -->
    <del>我是删除线</del>
    <ins>我是下划线</ins>
    <abbr title="这是一个提示语句">触摸可以提示</abbr>
    <mark>hello world</mark>
    <details>
      <summary>点击查看</summary>
      <p>我是隐藏的内容</p>
    </details>
    <!-- 
      图片 
    -->
    <figure>
      <!-- 这样写之后描述文字会处于一个和图片相对的位置  还是非常好用的 -->
      <img src="http://39.96.42.170/bg.jpg" />
      <figcaption>这个是我的博客头像</figcaption>
    </figure>

    <!-- 表单 -->
    <form>
      <fieldset>
        <legend>用户注册</legend>
        username：<input type="text" /> password：<input type="password" />
      </fieldset>
    </form>
    <!-- 
      必填字段 
        input标签含有 require属性 表示必填
    -->
    <form action="">
      <input type="text" required />
      <input type="email" required />
      <input type="submit" value="发送" />
    </form>
    <!-- 发送邮件 -->
    <form action="MAILTO:1002661758@qq.com" method="post" enctype="text/plain">
      <input type="submit" value="发送" />
    </form>
  </body>
</html>
